<template>
  <div class="infobox3">
    <div class="block1">轮播图</div>
    <div class="block2_main">
      <div class="block2">
        <div class="info1 flex aitems sb">
          <div class="tip1">基本信息</div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">边角样式</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.style.type">
                <el-radio label="plain">直角</el-radio>
                <el-radio label="round">圆角</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">轮播间隔</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.style.second">
                <el-radio label="3000">3s</el-radio>
                <el-radio label="5000">5s</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">轮播样式</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.style.types">
                <el-radio :label="1">样式一</el-radio>
                <el-radio :label="2">样式二</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">选中颜色</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.style.dotsType">
                <el-radio :label="1">跟随主题</el-radio>
                <el-radio :label="2">自定义</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.style.dotsType == 2">
          <div class="tip1">自定义颜色</div>
          <div class="tip2">
            <div class="input">
              <el-color-picker v-model="data.style.zdyColor"></el-color-picker>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">高度</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.height"
                :max="1500"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
      </div>

      <div class="block2">
        <div class="info1 flex aitems sb">
          <div class="tip1">组件样式</div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">上内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pTop"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">下内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pBottom"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">左内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pLeft"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">右内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pRight"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>

        <div class="info2 flex aitems">
          <div class="tip1">上外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mTop"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">下外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mBottom"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">左外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mLeft"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">右外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mRight"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
      </div>

      <div class="block2">
        <div class="info1 flex aitems sb">
          <div class="tip1">添加图片 (可拖动排序）</div>
        </div>
        <div class="info4" onselectstart="return false">
          <!-- <div>{{ drag ? "拖拽中" : "拖拽停止" }}</div> -->
          <draggable
            v-model="data.value"
            chosen-class="chosen"
            force-fallback="true"
            group="people"
            animation="500"
            @start="onStart"
            @end="onEnd"
          >
            <transition-group>
              <div
                class="list"
                v-for="(item, index, key) in data.value"
                :key="index"
              >
                <div class="topbox1 flex aitems sb">
                  <div class="left flex aitems">
                    <i class="el-icon-s-grid" style="font-size: 20px"></i>
                    <div class="tip1">图片{{ index + 1 }}</div>
                  </div>
                  <div class="right" @click="imgDel(index)">删除</div>
                </div>
                <div class="centerbox1 flex aitems sb">
                  <div class="left flex aitems" @click="settingNav(index)">
                    <div class="tip1">链接</div>
                    <div class="tip2" v-if="item.urlType == 4">
                      请选择跳转链接 <i class="el-icon-arrow-right"></i>
                    </div>
                    <div class="tip2" v-if="item.urlType == 2">
                      导向小程序 <i class="el-icon-arrow-right"></i>
                    </div>
                    <!-- <div class="tip2" v-if="item.urlType == 3">
                        导向内容详情 <i class="el-icon-arrow-right"></i>
                      </div> -->
                    <div class="tip2" v-if="item.urlType == 1">
                      导向内部页面 <i class="el-icon-arrow-right"></i>
                    </div>
                    <div class="tip2" v-if="item.urlType == 3">
                      导向外部页面 <i class="el-icon-arrow-right"></i>
                    </div>
                  </div>
                  <div class="right">
                    <!-- <input
                      type="file"
                      :ref="'uploadfile' + index"
                      @change="uploadImg(index)"
                      id="fileclass2"
                      class="fileclass"
                      accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
                    /> -->
                    <div class="img">
                      <img :src="item.link" alt="" />
                    </div>
                    <!-- <div class="size">{{ item.size }}</div> -->
                    <div class="btn" @click.stop="uploadImg(index, 'link')">
                      替换
                    </div>
                  </div>
                </div>
              </div>
            </transition-group>
          </draggable>
        </div>
        <div class="info3">
          <!-- <input
            type="file"
            ref="uploadfile"
            @change="uploadImg('add')"
            id="fileclass"
            class="fileclass"
            accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
          /> -->
          <el-button
            type=""
            size="small"
            icon="el-icon-plus"
            style="width: 100%"
            @click="addList"
            >添加图片</el-button
          >
        </div>
      </div>
    </div>

    <linkCom
      v-if="navShow"
      :navForm="navForm"
      @navSubmit="navSubmit"
      @beforeClose="navShow = false"
    />
  </div>
</template>

<script>
import draggable from "vuedraggable";
import { uploads } from "@/api/upload";
import linkCom from "../../components/link.vue";
export default {
  components: { linkCom },
  props: ["data", "messageInfo"],
  data() {
    return {
      drag: false,
      navIndex: null,
      navShow: false,
      navForm: {},
      myArray: [
        { people: "cn", id: 1, name: "www.itxst.com" },
        { people: "cn", id: 2, name: "www.baidu.com" },
        { people: "cn", id: 3, name: "www.taobao.com" },
        { people: "us", id: 4, name: "www.google.com" },
      ],

      tabbarUploadImgIndex: "",
      tabbarUploadImgKey: "",
    };
  },
  watch: {
    messageInfo(sendData) {
      console.log("-----------------------------------");
      console.log(sendData);
      if (sendData.type == "upload" && sendData.menuStr == "banner") {
        if (this.tabbarUploadImgKey) {
          this.data.value[this.tabbarUploadImgIndex][this.tabbarUploadImgKey] =
            sendData.sendData.ids;
          this.tabbarUploadImgKey = "";
        }
      }
      if (sendData.type == "pageLink" && sendData.menuStr == "banner") {
        if (this.tabbarUploadImgIndex !== null) {
          this.data.value[this.tabbarUploadImgIndex].urlType =
            sendData.sendData.targetType;
          if (sendData.sendData.targetType == 1) {
            this.data.value[this.tabbarUploadImgIndex].path =
              sendData.sendData.url;
            this.data.value[this.tabbarUploadImgIndex].params =
              sendData.sendData.params;
          }
          if (sendData.sendData.targetType == 2) {
            this.data.value[this.tabbarUploadImgIndex].miniappid =
              sendData.sendData.appId;
            this.data.value[this.tabbarUploadImgIndex].minipath =
              sendData.sendData.miniappurl;
          }
          if (sendData.sendData.targetType == 3) {
            this.data.value[this.tabbarUploadImgIndex].url =
              sendData.sendData.weburl;
          }
        }
      }
    },
  },

  methods: {
    addList() {
      let obj = {
        link: "", //图片链接
        urlType: 4, //1无跳转 2小程序 3内容详情 4功能页面 5外部页面
        miniappid: "", //2小程序APPID
        minipath: "", //2小程序路径
        path: "", //4内部页面路径
        params: "", //4携带参数
        url: "", //5外部页面
      };
      this.data.value.push(obj);
      console.log(this.data.value);
    },
    uploadImg(index, key) {
      this.tabbarUploadImgIndex = index;
      this.tabbarUploadImgKey = key;
      this.$store.state.menuStr = "banner";
      window.parent.postMessage(
        {
          type: "upload",
          options: {
            limit: 1,
          },
        },
        "*"
      );
    },
    onStart() {
      this.drag = true;
    },
    onEnd() {
      this.drag = false;
    },
    editorval(val) {
      this.navForm.content = val;
    },
    imgDel(index) {
      this.data.value.splice(index, 1);
    },
    settingNav(index) {
      this.tabbarUploadImgIndex = index;
      this.$store.state.menuStr = "banner";
      let data = {
        targetType: this.data.value[index].urlType,
        miniappurl: this.data.value[index].minipath,
        appId: this.data.value[index].miniappid,
        url: this.data.value[index].path,
        params: this.data.value[index].params,
        weburl: this.data.value[index].url,
      };
      window.parent.postMessage(
        {
          type: "pageLink",
          options: {
            // limit: 1,
            info: data,
          },
        },
        "*"
      );
    },
    navSubmit(form) {
      this.data.value[this.navIndex].urlType = form.urlType;
      if (form.urlType == 2) {
        this.data.value[this.navIndex].miniappid = form.miniappid;
        this.data.value[this.navIndex].minipath = form.minipath;
      }
      if (form.urlType == 3) {
        this.data.value[this.navIndex].content = form.content;
      }
      if (form.urlType == 4) {
        this.data.value[this.navIndex].path = form.path;
        this.data.value[this.navIndex].goodsid = form.goodsid;
        this.data.value[this.navIndex].cateid = form.cateid;
        this.data.value[this.navIndex].params = form.params;
      }
      if (form.urlType == 5) {
        this.data.value[this.navIndex].url = form.url;
      }
      console.log(this.data.value[this.navIndex]);
      this.navShow = false;
      this.navIndex = null;
      this.navForm = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  .infobox3 {
    width: 340px;
    min-width: 340px;
    height: 100%;
    background: #f8f9fa;
    overflow-y: hidden;
    padding: 0 0px 10px;
    .block1 {
      font-size: 14px;
      font-weight: 600;
      color: #595961;
      padding: 9px 16px 9px 12px;
    }
    .block2_main {
      padding: 0 0 10px 0;
      height: calc(100% - 30px);
      overflow-y: scroll;
      .block2 {
        padding: 0 0 0 10px;
        .info1 {
          padding: 9px 16px 9px 12px;
          font-weight: 600;
          background: #eef0f4;
          border-radius: 5px;
          font-size: 12px;
          font-weight: 600;
          color: #595961;
          .tip1 {
          }
        }
        .info2 {
          padding: 10px;
          .tip1 {
            font-size: 12px;
            color: #595961;
            margin: 0 10px 0 0;
            width: 80px;
          }
          .tip2 {
            width: calc(100% - 80px - 10px);
            .uploadbox {
              cursor: pointer;
              width: 120px;
              height: 120px;
              background: #fff;
              transition: all 0.3s;
              border-radius: 4px;
              position: relative;
              overflow: hidden;
              .plusicon {
              }
              .uploadimg {
                width: 100%;
                height: 100%;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
            }
            .uploadbox:hover {
              box-shadow: 0 0 10px 0 #ccc;
            }
          }
          .input {
          }
        }
        .info3 {
          padding: 10px 0;
          position: relative;
        }
        .info4 {
          .list {
            padding: 15px 10px 20px;
            border-radius: 4px;
            margin-top: 10px;
            // min-height: 100px;
            background: #f0f2f5;
            .topbox1 {
              cursor: pointer;
              .left {
                color: #595961;
                font-weight: 600;
                font-size: 14px;
                i {
                }
                .tip1 {
                  margin-left: 5px;
                  position: relative;
                  top: -1px;
                }
              }
              .right {
                color: #9797a1;
                font-size: 12px;
              }
              .right:hover {
                color: #595961;
              }
            }
            .centerbox1 {
              margin-top: 10px;
              .left {
                cursor: pointer;
                .tip1 {
                  color: #595961;
                  font-size: 12px;
                }
                .tip2 {
                  margin-left: 10px;
                  word-wrap: break-word;
                  font-size: 12px;
                  letter-spacing: 0;
                  color: #2589ff !important;
                }
              }
              .right {
                cursor: pointer;
                position: relative;
                .img {
                  img {
                    width: 70px;
                    height: 70px;
                    -o-object-fit: cover;
                    object-fit: cover;
                    border-radius: 4px;
                  }
                }
                .size {
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  background: rgba(0, 0, 0, 0.6);
                  z-index: 1;
                  width: 100%;
                  height: 26px;
                  text-align: center;
                  font-family: PingFangSC-Semibold;
                  font-size: 12px;
                  color: #fff;
                  line-height: 26px;
                  letter-spacing: 0;
                  border-bottom-left-radius: 4px;
                  border-bottom-right-radius: 4px;
                }
                .btn {
                  width: 60px;
                  height: 30px;
                  font-size: 12px;
                  text-align: center;
                  position: absolute;
                  top: 0;
                  right: 0;
                  left: 0;
                  bottom: 0;
                  margin: auto;
                  display: none;
                  z-index: 2;
                  background: #fff;
                  border-radius: 4px;
                  font-weight: 600;
                  color: #595961;
                  line-height: 30px;
                }
              }
              .right:hover .btn {
                display: block;
              }
            }
          }
        }
      }
    }
  }
}
.fileclass {
  position: absolute;
  width: 100%;
  bottom: 0;
  top: 0;
  z-index: 99;
  left: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
}
</style>
